<template>
  <div class="all">
    <!--    <div class="banner" style="margin-bottom: 20px;">-->
    <!--      <el-carousel height="175px" direction="vertical" :autoplay="false">-->
    <!--        <el-carousel-item v-for="item in myimg" :key="item">-->
    <!--            <img :src="item.url" alt="" style="width:100%;height: 100%;"/>-->
    <!--        </el-carousel-item>-->
    <!--      </el-carousel>-->
    <!--    </div>-->
    <div class="choose">
      <el-button round v-for="item in classtype">{{ item.ctype }}</el-button>
    </div>
    <div class="sift">
      <div class="left">
        <el-button style="margin:0px 10px 15px 20px" @click="dialogVisible=true">
          <el-icon style="margin-right: 5px">
            <Collection/>
          </el-icon>
          新建课程
        </el-button>
        <el-dialog
            v-model="dialogVisible"
            title="课程信息"
            width="70%"
            :before-close="handleClose"
        >
          <el-form :model="form" label-width="120px">
            <el-form-item label="课程名称">
              <el-input v-model="form.name"/>
            </el-form-item>
            <el-form-item label="课程简介">
              <el-input v-model="form.description" type="textarea"/>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">退出</el-button>
        <el-button type="primary" @click="announce">
          发布
        </el-button>
      </span>
          </template>
        </el-dialog>
        <el-button style="margin:0px 10px 15px 20px">
          <el-icon style="margin-right: 5px">
            <Guide/>
          </el-icon>
          新手指引
        </el-button>
      </div>
      <div class="right">
        <el-input
            v-model="cname"
            placeholder="请输入课程名进行搜索"
            class="input-with-select"
        >
          <template #prepend>
            <el-select v-model="select" placeholder="全部课程" style="width: 115px">
              <el-option label="国家一流" value="1"/>
              <el-option label="省级一流" value="2"/>
              <el-option label="开放课程" value="3"/>
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" @click="search"/>
          </template>
        </el-input>
      </div>
    </div>
    <div class="displayclass" style="margin-top: 100px">
      <el-row>
        <!--        这个for循环的界限应该是获得数组长度，但是我不知道怎么写进去-->
        <el-col
            v-for="(o, index) in Tform.valueOf()"
            :key="o"
            :span="4"
            :offset="index > 0 ? 2 : 0"
            style="margin:0px 10px 15px 20px"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
                src="https://ali-cdn.educoder.net/images/avatars/Subject/1792?t=1616592220"
                class="image"
            />
            <div style="padding: 14px">
              <span>{{ Tform[index] }}</span>
              <div class="bottom">
                <p style="font-size: small;color: #99a9bf">
                  <el-icon style="margin-right: 5px">
                    <UserFilled/>
                  </el-icon>
                  45人
                </p>
                <el-button round @click="enterClass(Tform[index].id)">进入课程</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted, Ref} from 'vue'
import {Collection, Guide, Search, UserFilled, Plus} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {ElMessageBox, ElMessage} from 'element-plus'
import type {UploadProps} from 'element-plus'
import axios from "axios";
import Course from "@/class/Course";
import {CourseStore} from "@/store";

const form: Ref<Course> = ref<Course>({
  id: '',
  name: '',
  description: ''
})
const form1: Ref<Course> = ref<Course>({
  id: '',
  name: '',
  description: ''
})
// 新增课程
const dialogVisible = ref(false)
const announce = async () => {
  dialogVisible.value = false
  await
      axios.post('/course', form.value)
          .then(function (res) {
            load()
            console.log(res.data)
            form1.value = {
              id: '',
              name: '',
              description: ''
            }
          })
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('您确定已发布课程?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}


const onSubmit = () => {
  console.log('submit!')
}

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const router = useRouter()
const enterClass = (val: string) => {
  coursestore.course_id = val
  router.push("/tchapter")
}
const checked = ref(false)

const onChange = (status: boolean) => {
  checked.value = status
}
const myimg = [
  {url: require("@/assets/img/9.png")},
]
const coursestore = CourseStore()
// 课程渲染
const Tform = ref([]) as any

const classTitle = ref([])
const load = () => {
  axios.get('/course/all')
      .then(function (res) {
        console.log(res.data.data)
        classTitle.value = res.data.data
      })
}
// const load = () => {
//   axios.get('/course/all')
//       .then(function (res) {
//         // console.log(res)
//         classTitle.value = res.data.data
//         // 提取出单独的课程名
//         for (var i = 0; i < classTitle.value.length; i++) {
//           Tform.value[i] = classTitle.value[i].name
//         }
//         console.log(classTitle.value)
//         // console.log(classTitle.value[1].name)
//         console.log(Tform.value)
//       })
// }


onMounted(() => {
  load()
})

const classtype = [
  {ctype: '全部'},
  {ctype: '程序设计语言'},
  {ctype: '算法设计'},
  {ctype: '计算机基础'},
  {ctype: '计算机系统能力'},
  {ctype: '云计算与大数据'},
  {ctype: '人工智能'},
  {ctype: '电子信息'},
  {ctype: 'Web开发'},
  {ctype: '软件工程'},
  {ctype: '网络安全'},
  {ctype: '物联网'},
]

const cname = ref("")
const search = (() => {
  axios.post('/course/search' + cname.value)
      .then(function (res) {
        load()
      })
})

</script>

<style scoped>
.all {
  overflow-x: hidden;
  background-color: rgba(240, 242, 245, 1);;
}

.sift {
  height: 30px;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  width: 100%;
  margin-bottom: -40px;
}

.left {
  margin-left: 20px;
}

.right {
  margin-right: 40px;
}

.sift .right .input-with-select {
  height: 30px;
  width: 450px;
  border-radius: 30px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.choose {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
  height: 100px;
  padding: 0 30px 0;
  margin-bottom: 30px;
  position: relative;
  line-height: 3;
}

.all .choose .el-button.is-round {
  margin-right: 20px;
}

.displayclass {
  margin-left: 30px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  text-align: center;
}
</style>
